<template>
  <view class="game-page">
    <view class="game-content">
      <HomePage 
        v-if="currentPage === 'home'" 
        @navigate="navigateTo"
      />
      <DeathSimulator 
        v-else-if="currentPage === 'death'"
        @go-back="goHome"
      />
      <LotteryGame 
        v-else-if="currentPage === 'lottery'"
        @go-back="goHome"
      />
    </view>
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import { onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app';
import HomePage from '@/components/game/HomePage.vue';
import DeathSimulator from '@/components/game/DeathSimulator.vue';
import LotteryGame from '@/components/game/LotteryGame.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 隐藏导航栏左侧返回按钮
onShow(() => {
  // @ts-ignore
  if (typeof wx !== 'undefined' && wx.hideHomeButton) {
    // @ts-ignore
    wx.hideHomeButton();
  }
});

const currentPage = ref('home'); // 'home', 'death', 'lottery'
const shareData = ref({
  title: '概率游戏体验中心',
  path: '/pages/game'
});

function navigateTo(page: string) {
  currentPage.value = page;
  // 切换页面时滚动到顶部
  uni.pageScrollTo({ scrollTop: 0, duration: 300 });
  // 切换页面时重置分享数据
  updateShareData('概率游戏体验中心', '/pages/game');
}

function goHome() {
  currentPage.value = 'home';
  uni.pageScrollTo({ scrollTop: 0, duration: 300 });
  // 返回主页时重置分享数据
  updateShareData('概率游戏体验中心', '/pages/game');
}

// 更新分享数据的方法（供子组件调用）
function updateShareData(title: string, path: string) {
  shareData.value = { title, path };
}

// 提供给子组件使用
provide('updateShareData', updateShareData)

// 配置分享到聊天
onShareAppMessage(() => {
  return {
    title: shareData.value.title,
    path: shareData.value.path,
    imageUrl: '' // 可选：设置分享图片
  };
});

// 配置分享到朋友圈
onShareTimeline(() => {
  return {
    title: shareData.value.title,
    path: shareData.value.path
  };
});

// 启用分享功能
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
});
</script>

<style>
page {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.game-page {
  min-height: 100vh;
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden;
  background: linear-gradient(135deg, #45B05D 0%, #3D9E51 100%);
  background-attachment: fixed;
  box-sizing: border-box;
  position: relative;
}

.game-content {
  padding-bottom: 50px;
}
</style>

